<template>
  <div class="editContainer">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>编辑文章</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="back">返回</el-button>
      </div>
      <el-form ref="form" :model="editForm" label-width="140px">
        <el-form-item label="文章类型">
          <el-input v-model="editForm.category" style="width: 300px" />
        </el-form-item>
        <el-form-item label="文章所属频道ID">
          <el-input v-model="editForm.channelId" style="width: 300px" />
        </el-form-item>
        <el-form-item label="频道名称">
          <el-select v-model="editForm.channelId" placeholder="请选择频道">
            <el-option v-for="(item,index) in channels" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="文章内容">
          <mavon-editor
            ref="md"
            v-model="editForm.content"
            :box-shadow="false"
            :subfield="false"
            default-open="preview"
            :autofocus="false"
            style="width: 99%;"
            @imgAdd="$imgAdd"
          />
        </el-form-item>
        <el-form-item label="文章图片">
          <el-upload
            action="/oss/img"
            :file-list="fileList"
            list-type="picture-card"
            name="object"
            :on-success="uploadSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImg" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="文章标题">
          <el-input v-model="editForm.title" style="width: 300px" />
        </el-form-item>
        <el-form-item label="文章状态">
          <el-radio-group v-model="editForm.status">
            <el-radio :label="1">已发布</el-radio>
            <el-radio :label="0">未发布</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">发布</el-button>
          <el-button @click="back">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { queryArticleList, updateArticleList } from '@/api/article'
import { uploadFile } from '@/api/file-manger'
import {getChannelAll} from "@/api/channel";
export default {
  name: 'EditArticle',
  data() {
    return {
      dialogVisible: false,
      dialogImg: '',
      editForm: {},
      fileList: [],
      images: '',
      //频道名称数据
      channels:[]
    }
  },
  mounted() {
    this.getData()
    this.getChannelData()
  },
  methods: {
    //获取频道名称数据
    getChannelData(){
      getChannelAll().then(res=>{
        this.channels=res.data
      })
    },
    // 通过ID获取数据
    getData() {
      const id = this.$route.query.id
      queryArticleList(id).then(res => {
        this.editForm = res.data
        res.data.images.split(',').forEach(imgUrl => {
          this.fileList.push({ url: imgUrl })
        })
      })
    },
    // 返回文章管理页面
    back() {
      this.$store.dispatch('tagsView/delVisitedView', this.$route)
      this.$router.push('/tweet/article')
    },
    uploadSuccess(file, fileList) {
      this.fileList.push({ url: fileList.response.data })
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true
      this.dialogImg = file.url
    },
    handleRemove(file, fileList) {
      this.fileList=fileList
    },
    // 提交编辑
    onSubmit() {
      const id = this.$route.query.id
      updateArticleList({
        id: id,
        category: this.editForm.category,
        channelId: this.editForm.channelId,
        channelName: this.channels[this.channels.findIndex(item=>item.id===this.editForm.channelId)].name,
        content: this.editForm.content,
        images: this.fileList.map(item => item.url).join(','),
        status: this.editForm.status,
        title: this.editForm.title
      }).then(() => {
        this.$message.success('更新成功')
        this.back()
      })
    },
    // 将图片上传到服务器，返回地址替换到md中
    $imgAdd(pos, $file) {
      const formData = new FormData()

      formData.append('object', $file)
      uploadFile(formData).then(res => {
        this.$refs.md.$img2Url(pos, res.data)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.editContainer{
  padding: 20px;
}
</style>
